<template>
    <div
            class="app-container"
            :element-loading-text="loadingText"
    >
        <el-form ref="queryForm" label-width="88px">
            <el-form-item label="挂号单ID" prop="regId">
                <el-input
                        v-model="regId"
                        clearable
                        placeholder="请输入挂号单号"
                        size="small"
                        style="width:300px"
                />
                <el-button type="primary" icon="el-icon-search" size="mini"  @click="handleQuery">查询</el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" >读取IC卡</el-button>
            </el-form-item>
        </el-form>

        <!-- 挂号输入框下面的所有内容开始 -->
        <div  v-if="careHistory.regId!==undefined">
            <!-- 病例信息开始 -->
            <el-card style="margin-bottom: 5px;">
                <el-form label-position="right" label-width="120px" inline class="demo-table-expand">
                    <el-form-item label="挂号单号:" >
                        <span v-text="careHistory.regId" class="txt"/>
                    </el-form-item>
                    <el-form-item label="医生姓名:" >
                        <span v-text="careHistory.userName" class="txt" />
                    </el-form-item>
                    <el-form-item label="科室名称:">
                        <span v-text="careHistory.deptName" class="txt"/>
                    </el-form-item>
                    <el-form-item label=" 患者姓名:">
                        <span v-text="careHistory.patientName" class="txt"/>
                    </el-form-item>
                    <el-form-item label="就诊时间:">
                        <span v-text="careHistory.careTime"  class="txt"/>
                    </el-form-item>
                    <el-form-item label="主诉:">
                        <span v-text="careHistory.caseTitle" class="txt"/>
                    </el-form-item>
                    <el-form-item label="诊断信息:">
                        <span v-text="careHistory.caseResult" class="txt"/>
                    </el-form-item>
                    <el-form-item label="医生建议:">
                        <span v-text="careHistory.doctorTips" class="txt"/>
                    </el-form-item>
                </el-form>
            </el-card>
            <!-- 病例信息结束 -->
            <!-- 工具按钮开始 -->
            <el-card style="margin-bottom: 5px">
                <el-button type="success" icon="el-icon-finished" @click="handleSelectAll">全选</el-button>
                <el-button type="success" icon="el-icon-finished" @click="handleUnSelectAll">取消全选</el-button>
                <el-button type="danger" icon="el-icon-bank-card" @click="handleBackfeeWithCash">发药</el-button>
            </el-card>
            <!-- 工具结束开始 -->
            <!-- 未支付的处方信息开始 -->
            <el-card style="margin-bottom: 5px">
                <el-collapse v-if="careOrderItems.length>0" v-model="activeNames">
                    <el-collapse-item v-for="(item,index) in careOrderItems" :key="index" :name="index">
                        <template slot="title">
                            【药用处方】【{{ index+1 }}】【处方总额】:￥{{ item.allAmount }}
                        </template>
                        <el-table
                                ref="refTable"
                                border
                                :data="item.careOrderItems"
                                :row-class-name="tableRowClassName"
                                @selection-change="handleCareOrderItemSelectionChange($event,item.coId)"
                        >
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column label="序号" align="center" type="index" width="50" />
                            <el-table-column label="药品名称" align="center" prop="itemName" />
                            <el-table-column label="数量" align="center" prop="num" />
                            <el-table-column label="单价(元)" align="center" prop="price" />
                            <el-table-column label="金额(元)" align="center" prop="amount" />
                            <el-table-column label="备注" align="center" prop="remark" />
                            <el-table-column label="状态" align="center" prop="status" :formatter="statusFormatter" />
                        </el-table>
                    </el-collapse-item>
                </el-collapse>
            </el-card>
            <!-- 未支付的处方信息结束 -->
            <!-- 挂号输入框下面的所有内容结束 -->
        </div>
        <div v-else style="text-align:center">请输入正确的挂号单ID查询</div>
    </div>
</template>

<script>
    import Vue from "vue";
    import Medicinal from "@/views/stock/Medicinal";
    export default {
        components: {Medicinal},
        data(){
            return{

                // 设置遮罩层的文字
                loadingText: '',
                // 用户输入的挂号单号
                regId: undefined,
                // 病例对象
                careHistory: {},
                // 当前选中的订单总额
                allAmount: 0.00,
                // 默认药用处方
                coType:'0',
                //处方信息
                careOrderItems:[],
                // 展开的折叠面板的名字
                activeNames: [],
                // 处方详情的状态字典
                statusOptions: [],

                // 当前选中的所有项目集合
                itemObjs: [],
            }
        },
        methods:{
            //查询
            handleQuery(){
                if (this.regId === '') {
                    Vue.prototype.$message.error('请输入挂号单号')
                    this.resetCurrentParams()
                    return
                }
                this.careHistory = {}
                this.careOrderItems = []
                this.itemObjs = []
                this.loadingText = '数据查询中，请稍后...'
                this.$axios.get("/charge/api/dispensing/getDisPensingRegId/"+this.regId).then(result=>{
                    this.careHistory = result.data.t.careHistory;
                    this.careOrderItems=result.data.t.list;
                    this.loadingText = ''
                    this.careOrderItems.filter((c, index) => {
                        this.activeNames.push(index)
                    })
                    this.regId=undefined;
                }).catch(() => {
                    Vue.prototype.$message.error('目前无代发药品')
                })

            },
            initCareOrderItem(){
                this.$axios.get("/charge/api/careHistory/getByType/his_order_details_status").then(r=>{
                    this.statusOptions=r.data.t;
                })
            },
            // 翻译处方详情状态
            statusFormatter(row){
                return this.formatDict(this.statusOptions, row.status)
            },


            // 全选择
            handleSelectAll() { // 先取消再反选择
                const tables = this.$refs.refTable
                tables.filter(t => {
                    t.clearSelection()
                    t.toggleAllSelection() // 注意不要用错方法了
                })
            },
            // 取消全选
            handleUnSelectAll() {
                const tables = this.$refs.refTable
                tables.filter(t => {
                    t.clearSelection()
                })
            },

            // 监听多个表格的checkbox的选中事件
            handleCareOrderItemSelectionChange(selection, coId) {
                if (this.itemObjs.length === 0) {
                    this.itemObjs = selection
                } else {
                    for (let i = 0; i < this.itemObjs.length; i++) {
                        const obj = this.itemObjs[i]
                        if (obj.coId === coId) {
                            this.itemObjs.splice(i, 1)
                            i--
                        }
                    }
                    // 最后再来添加
                    selection.filter(newItem => {
                        this.itemObjs.push(newItem)
                    })
                }
                // 调用计算选中的总额
                this.computeAllAmount()
            },
            // //计算选中的总额
            computeAllAmount() {
                this.allAmount = 0
                this.itemObjs.filter(item => {
                    this.allAmount += item.amount
                })
            },
            tableRowClassName({ row, rowIndex }) {
                row.index = rowIndex
            },

            // 清空careHistory
            resetCurrentParams() {
                this.careHistory = {}
                this.careOrderItems=[]
            },

            // 发药
            handleBackfeeWithCash() {
                if (!this.careHistory.regId) {
                    Vue.prototype.$message.error('请输入挂号单ID查询')
                    return
                } else if (this.itemObjs.length === 0) {
                    Vue.prototype.$message.error('请选择要发药的药品名')
                    return
                } else {
                    // 组装数据
                    const itemIds = this.itemObjs.map(item => item.itemId)
                    console.log(itemIds)
                    // 发送请求
                    this.loadingText = '发药中。。。'
                    this.$confirm('是否确定发药?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$axios.get("/charge/api/dispensing/disPensing/"+itemIds).then(res => {

                            if(res.data.t==true){
                                this.$message.success(res.data.msg)
                            }else{
                                this.$message.error("发药失败")

                            }
                            // this.resetCurrentParams()
                            this.handleQuery()
                        })
                    }).catch(() => {
                        Vue.prototype.$message.error('发药已取消')
                    })
                }
            },



        },
        created() {
            this.initCareOrderItem();
        }

    }
</script>

<style>

    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .txt{
        width:150px;display: block;
    }


</style>
